<template>
  <div id="app">
    <el-row>
      <el-input v-model="key" label="解密key:" style="width: 200px" />
    </el-row>

    <el-row>
      <el-button type="primary" @click="onSelectFile">选择文件</el-button>
      <span style="margin-left: 10px">文件名: {{filename}}</span>
      <input type="file" style="display: none" ref="iFile" @change="onFileChange" />
    </el-row>

    <el-collapse :hidden="!isShow" style="margin: 20px" accordion>
      <el-collapse-item name="1" title="属性">
        <div class="div-border">
          <el-form :model="role" label-width="80px">
            <el-form-item label="当前血量" style="margin-top: 6px">
              <el-input v-model="role.hp"></el-input>
            </el-form-item>
            <el-form-item label="血量上限">
              <el-input v-model="role.hpMax"></el-input>
            </el-form-item>
            <el-form-item label="拥有金钱">
              <el-input v-model="role.money"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>

      <el-collapse-item name="2" title="卡牌">
        <el-dialog title="选择卡牌" :visible.sync="showCardDialog" width="200px" center >
          <el-table :data="validCards" @row-click="onCardSelect" border stripe max-height="400">
            <el-table-column label="ID">
              <template slot-scope="scope">
                <span>{{scope.row}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>

        <div class="div-border">
          <el-button type="primary" size="mini" @click="onCardsAdd">添加</el-button>
          <el-table :data="role.cards" stripe >
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="是否升级">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.upgrades"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="选项">
              <template slot-scope="scope">
                <el-button size="mini" @click="onCardsChange(scope.$index)">更换</el-button>
                <el-button type="danger" size="mini" @click="onCardsRemove(scope.$index, scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>

      <el-collapse-item name="3" title="遗物">
      <el-dialog title="选择遗物" :visible.sync="showRelicDialog" width="200px" center >
        <el-table :data="validRelics" @row-click="onRelicSelect" border stripe max-height="400">
          <el-table-column label="ID">
            <template slot-scope="scope">
              <span>{{scope.row}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <div class="div-border">
        <el-button type="primary" size="mini" @click="onRelicsAdd">添加</el-button>
        <el-table :data="role.relics" stripe >
          <el-table-column label="ID">
            <template slot-scope="scope">
              <span>{{scope.row}}</span>
            </template>
          </el-table-column>
          <el-table-column label="选项">
            <template slot-scope="scope">
              <el-button size="mini" @click="onRelicsChange(scope.$index)">更换</el-button>
              <el-button type="danger" size="mini" @click="onRelicsRemove(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      </el-collapse-item>
    </el-collapse>

    <div class="div-border div-top" :hidden="!isShow">
      <el-button type="primary" @click="onNewSave">生成存档</el-button>
      <el-button type="success" id="newFileBtn" data-clipboard-target="#new-file">复制到剪贴板</el-button>
      <el-input
        id="new-file"
        v-model="newSave"
        type="textarea"
        style="margin-top: 8px"
        readonly
        autosize>
      </el-input>
    </div>
  </div>
</template>

<script>
import Coder from '@/utils/coder.js'
import Clipboard from 'clipboard'

export default {
  name: 'app',
  data() {
    return {
      saveFile: {},
      newSave: '',
      key: 'key',
      filename: '',
      isShow: false,
      role: {
        color: 'red',
        hp: 0,
        hpMax: 0,
        money: 0,
        cards: [],
        relics: []
      },
      validCards: [1,2,3],
      validRelics: [3,2,1],
      changingIndex: 0,
      showCardDialog: false,
      showRelicDialog: false
    }
  },
  mounted() {
    var cb = new Clipboard('#newFileBtn')

    var that = this
    cb.on('success', function(e) {
      that.$message('复制成功')
    })

    cb.on('error', function(e) {
      that.$message('复制失败，请手动复制')
    })
  },
  methods: {
    onFileChange(change) {
      if (change.target.files.length > 0) {
        var file = change.target.files[0]
        this.filename = file.name

        var that = this
        var reader = new FileReader()
        reader.readAsText(file)
        reader.onload = function() {
          var saveFile = Coder.decode(reader.result, that.key)
          if (saveFile != null) {
            that.saveFile = saveFile
            that.role.hp = saveFile.current_health
            that.role.hpMax = saveFile.max_health
            that.role.money = saveFile.gold
            that.role.cards = saveFile.cards
            that.role.relics = saveFile.relics

            if (saveFile.red != 0) {
              that.role.color = 'red'
            } else if (saveFile.green != 0) {
              that.role.color = 'green'
            } else {
              that.role.color = 'blue'
            }

            that.isShow = true
          } else {
            that.isShow = false
            that.$message('存档文件错误')
          }
        }
      }
    },
    onSelectFile() {
      this.$refs.iFile.click()
    },
    onCardsAdd() {
      this.changingIndex = -1
      this.showCardDialog = true
    },
    onCardsChange(index) {
      this.changingIndex = index
      this.showCardDialog = true
    },
    onCardsRemove(index, name) {
      this.$confirm('即将删除 ' + name +', 是否继续?', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.role.cards.splice(index, 1)
        })
    },
    onRelicsAdd() {
      this.changingIndex = -1
      this.showRelicDialog = true
    },
    onRelicsChange(index) {
      this.changingIndex = index
      this.showRelicDialog = true
    },
    onRelicsRemove(index, name) {
      this.$confirm('即将删除 ' + name +', 是否继续?', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.role.relics.splice(index, 1)
        })
    },
    onCardSelect(row, event, column) {
      if (this.changingIndex < 0) {
        console.log('添加卡牌: ' + row)
      } else {
        console.log('变更卡牌: ' + this.role.cards[this.changingIndex].id + ' -> ' + row)
      }
      this.showCardDialog = false
    },
    onRelicSelect(row, event, column) {
      if (this.changingIndex < 0) {
        console.log('添加遗物: ' + row)
      } else {
        console.log('变更遗物: ' + this.role.relics[this.changingIndex] + ' -> ' + row)
      }
      this.showRelicDialog = false
    },
    onNewSave() {
      this.saveFile.current_health = this.role.hp
      this.saveFile.max_health = this.role.hpMax
      this.saveFile.gold = this.role.money
      this.saveFile.cards = this.role.cards
      this.saveFile.relics = this.role.relics

      this.newSave = JSON.stringify(this.saveFile)
    }
  }
}
</script>

<style scoped>
  .el-row {
    margin: 6px;
  }

  .el-form-item {
    width: 160px;
  }

  .div-border {
    padding: 10px;
    border: 1px lightgray solid
  }

  .div-top {
    margin-top: 6px;
  }

  .title {
    font-size: 30px;
    margin: 4px;
  }
</style>
